<template>
    <line 
        :x1="x1" 
        :y1="y1" 
        :x2="x2"
        :y2="y2"
        :width="width" 
        :height="height" 
        :fill="fill" 
        :style="customStyle" >
    </line>
</template>

<script>
export default {
    name: 'VoGridLine',
    props: {
        x1: {
            type: [Number, String],
            default: 0
        },
        y1: {
            type: [Number, String],
            default: 0
        },
        x2: {
            type: [Number, String],
            default: 0
        },
        y2: {
            type: [Number, String],
            default: 0
        },
        width: {
            type: [Number, String],
            default: 0
        },
        height: {
            type: [Number, String],
            default: 0
        },
        active: Boolean,
        fill: {
            type: String,
            default: '#EBEEF5'
        },
        activeFill: {
            type: String,
            default: '#E6A23C'
        },
        stroke: {
            type: String,
            default: '#DCDFE6'
        },
        strokeWidth: {
            type: Number,
            default: 4
        },
        activeStroke: {
            type: String,
            default: '#DCDFE6'
        },
        activeStrokeWidth: {
            type: Number,
            default: 4
        }
    },
    computed: {
        customStyle() {
            return {
                fill: this.active ? this.activeFill : this.fill,
                stroke: this.active ? this.activeStroke : this.stroke,
                strokeWidth: this.active ? this.activeStrokeWidth : this.strokeWidth,
                transition: '0.2s'
            }
        }
    }
}
</script>